<template>
	<view class="box" :style="theme">
		<block v-if="tabValue == 0">
			<u-sticky bgColor="#fff" style="top: 0;">
				<view class="topTab">
					<view class="left">
						<u-tabs :list="tabHead" lineHeight="6rpx" :scrollable="false"
							:activeStyle="{fontWeight: 'bolder',fontSize: '34rpx',color: '#222222'}"
							:inactiveStyle="{fontSize: '30rpx'}" @click="tabHeadclick" :current="swiperIndex">
						</u-tabs>
					</view>
				</view>
				<view v-show="swiperIndex == 1" class="head flex-cb">
					<view class="head-left flex-c">
						<image :src="imgHost+'/ar_left.png'" @click="weekChange"></image>
						<text>{{weekName}}</text>
						<image :src="imgHost+'/ar_right.png'" @click="weekChangeb"></image>
					</view>
					<view class="head-right f28" @click="weekChangec">回到本周</view>
				</view>
				<view v-show="swiperIndex == 1" class="qhTab flex flex_between">
					<view class="left flex">
						<view v-for="(item, index) in tab" :key="index" :class="typeIndex === index?'on':''" @click="typeIndexBtn(index)">{{item.name}}</view>
					</view>
				</view>
			</u-sticky>
		</block>
		<view v-if="swiperIndex == 0 && tabValue == 0" class="calendar">
			<Calendar @confirm="confirm" />
	   </view>
		<view v-show="tabValue == 0" class="content">
			<view class="xxkc" v-for="(item, index) in list" :key="index" @click="jumpDetail(item)">
				<view class="tabHead flex flex_between" :class="item.status ==3?'on':item.status ==1?'ons':item.status==2?'hui':item.status==0?'zs':''">
					<view class="left flex">
						<u-icon name="clock" :color="item.status==0?'#fff':item.status==1?'#666':'#333'"size="28rpx"></u-icon>
						<text>
							<block v-if="swiperIndex == 1">{{item.day.slice(5, 10) + ' '}}</block>
							<block v-if="swiperIndex == 1 && item.days">{{item.days + ' '}}</block>
							{{item.time || ''}}
						</text>
					</view>
					<view class="right">
						{{item.status==0?'未上课':item.status ==1?'已上课':item.status ==2?'已结束':'待成班'}}
					</view>
				</view>
				<view class="flex flex_between cont">
					<image class="left" :src="item.courseImage" @click.stop="previewImg(item.courseImage)"></image>
					<view class="right">
						<view class="name">{{item.venueName ? item.venueName + ' | ':''}}{{item.courseName}}</view>
						<view v-if="item.site" class="dd">地点：{{item.site}}</view>
							<view v-if="item.courseClassName" class="dd">班级：{{item.courseClassName}}</view>
						<view class="dd">学员：{{item.stuSize || 0}}人</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		</view>
		<view v-if="list.length === 0 && tabValue == 0" class="no-order" style="min-height: 30vh;">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
		<block v-if="tabValue == 1">
			<view style="height: 30rpx;"></view>
			<view class="headTj flex">
				<view class="xbox">
					<view class="num">{{tjInfo.today || 0}}</view>
					<view>今日课时</view>
				</view>
				<view class="xbox">
					<view class="num">{{tjInfo.month || 0}}</view>
					<view>本月课时</view>
				</view>
			</view>
			<view class="tjContent">
				<view class="mx">课时明细</view>
				<view class="searchBox flex flex_between">
					<u-search shape="round" placeholder="输入课程名称" v-model="kcName" clearabled :show-action="false"
						@search="searchBtn" @clickIcon="searchBtn" bgColor="#fff" height="72rpx">
					</u-search>
					<input class="time" placeholder="请选择起始日期" v-model="time" @click="showRLBtn" disabled />
				</view>
				<view class="tJBtns flex flex_between">
					<view class="left flex">
						<view v-for="(item, index) in timeList" :key="index" class="li"
							:class="item.start === startTime && item.end === endTime?'on':''" @click="timeBtn(item)">
							{{item.name}}
						</view>
					</view>
					<view class="right flex">
						<view class="cz" @click="czBtn">重置</view>
						<view class="ml1" @click="searchBtn">搜索</view>
					</view>
				</view>
				<view class="xxkc" v-for="(item, index) in mxList" :key="index" >
					<view class="flex flex_between cont">
						<image class="left" :src="item.courseImg" style="width: 212rpx;height: 120rpx;"></image>
						<view class="right">
							<view class="name">{{item.venueName ? item.venueName + ' | ':''}}{{item.courseName}}</view>
							<view v-if="item.site" class="dd">{{item.site}}</view>
							<view v-if="item.time" class="jl">{{item.time}}</view>
							<view v-if="item.duration" class="jl">课时：{{formatSeconds(item.duration)}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="endb && mxList.length >= 10" :status="status" line />
		</block>
		<view v-if="mxList.length === 0 && tabValue == 1" class="no-order" style="min-height: 30vh;">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
		<u-calendar :color="color" :minDate="minDate" :maxDate="maxDate" monthNum="10" allowSameDay :show="showRL"
			confirmDisabledText="请选择起始日期和结束日期" mode="range" @confirm="confirmBtn" @close="closeBtn"></u-calendar>
		<u-tabbar :value="tabValue" activeColor="#222222" inactiveColor="#999999" zIndex="999">
			<u-tabbar-item v-for="(item,index) in tabList" :key="index" :text="item.name" @click="click1">
				<image class="u-page__item__slot-icon" mode="widthFix" slot="inactive-icon" :src="imgHost + item.url">
				</image>
				<image class="u-page__item__slot-icon" mode="widthFix" slot="active-icon" :src="imgHost + item.urlb">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import Calendar from "@/components/calendar.vue";
	export default {
		components: {
			Calendar
		},
		data() {
			return {
				tabValue: 0,
				noClick: true,
				tjInfo: {},
				status: 'nomore',
				color: `var(--color)`,
				mxList: [],
				tabList: [{
					name: '课程表',
					url: '/nav_kebiao.png',
					urlb: '/nav_kebiao_sel.png'
				}, {
					name: '课时明细',
					url: '/nav_keshi.png',
					urlb: '/nav_keshi_sel.png'
				}],
				tabHead: [{
					name: "课时日历",
					value: '0',
					triggered: false,
				}, {
					name: "课时列表",
					value: '1',
					triggered: false,
				}],
				list: [],
				showCalendar: true,
				presentTime: new Date(new Date().toLocaleDateString()).getTime(),
				page: 1,
				pageb: 1,
				end: false,
				endb: false,
				firstQueryTime: '',
				tab: [{
					name: "待开课",
					triggered: false,
				}, {
					name: "已开课",
					triggered: false,
				}],
				typeIndex: 0,
				swiperIndex: 0,
				currentDate: '',
				weekList: [],
				weekName: '',
				studentId: '',
				courseId: '',
				time: '',
				kcName: "",
				startTime: '',
				endTime: '',
				dateList: [],
				kssj: '',
				timeList: [],
				showRL: false,
				maxDate: Number(new Date()) + 864000000,
				minDate: new Date(new Date().toLocaleDateString()).getTime(),
			}
		},
		onLoad() {
			this.firstQueryTime = this.$app.firstQueryTime()
			this.kssj = this.$app.firstQueryTime().slice(0, 10)
			this.minDate = Number(new Date()) - (86400000 * 180)
			this.setDate(new Date())
			this.getTimeList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			formatSeconds(e) {
			   return this.$app.formatSeconds(e);
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			closeBtn() {
				this.showRL = false
			},
			showRLBtn() {
				this.showRL = true
			},
			confirmBtn(e) {
				console.log(e);
				this.showRL = false
				this.startTime = e[0]
				this.endTime = e[e.length - 1]
				this.time = e[0] + '~' + e[e.length - 1]
				this.searchBtn()
			},
			getTimeList() {
				var now = new Date(); // 获取当前日期时间
				var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
				var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
				this.timeList = [{
					name: '今日',
					start: this.formatDateb(new Date()),
					end: this.formatDateb(new Date())
				}, {
					name: '昨日',
					start: this.formatDateb(Number(new Date()) - (86400000)),
					end: this.formatDateb(Number(new Date()) - (86400000))
				}, {
					name: '本月',
					start: this.formatDateb(monthStart),
					end: this.formatDateb(monthEnd)
				}]
			},
			formatDateb(date) {
				let _date = new Date(date);
				let y = _date.getFullYear();
				let m = _date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				let d = _date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let dates = y + '-' + m + '-' + d 
				return dates;
			},
			getWeek() {
				const days = 7; // 近7天
				const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期
				const dateList = Array.from({
					length: days
				}, (v, i) => i).map(day => {
					const date = new Date(this.kssj);
					date.setDate(date.getDate() + day);
					let M =
						(date.getMonth() + 1 < 10 ?
							"0" + (date.getMonth() + 1) :
							date.getMonth() + 1) + "-";
					let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					return {
						week: '周' + week[date.getDay()],
						day: date.getFullYear() + '-' + M + D,
						date: date.getDate()
					}
				});
				this.dateList = dateList
			},
			getWeekBtn(type) {
				const days = 7; // 近7天
				const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期
				let dateList = []
				if (type == 1) {
					dateList = Array.from({
						length: days
					}, (v, i) => i).map(day => {
						const start = new Date(this.dateList[0].day)
						const date = new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 7))
						date.setDate(date.getDate() + day);
						let M =
							(date.getMonth() + 1 < 10 ?
								"0" + (date.getMonth() + 1) :
								date.getMonth() + 1) + "-";
						let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						return {
							week: '周' + week[date.getDay()],
							day: date.getFullYear() + '-' + M + D,
							date: date.getDate()
						}
					});
				} else {
					dateList = Array.from({
						length: days
					}, (v, i) => i).map(day => {
						const start = new Date(this.dateList[6].day)
						const date = new Date(start.setTime(start.getTime() + 3600 * 1000 * 24))
						date.setDate(date.getDate() + day);
						let M =
							(date.getMonth() + 1 < 10 ?
								"0" + (date.getMonth() + 1) :
								date.getMonth() + 1) + "-";
						let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						return {
							week: '周' + week[date.getDay()],
							day: date.getFullYear() + '-' + M + D,
							date: date.getDate()
						}
					});
				}

				this.dateList = dateList
				this.dateBtn(dateList[0])
			},
			tabHeadclick(e) {
				this.swiperIndex = e.index;
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			searchBtn() {
				this.mxList = [];
				this.firstQueryTime = this.$app.firstQueryTime()
				this.pageb = 1;
				this.endb = false;
				this.getMxList()
			},
			timeBtn(e) {
				this.startTime = e.start
				this.endTime = e.end
				this.time = e.start + '~' + e.end
				this.searchBtn()
			},
			czBtn() {
				this.mxList = [];
				this.endTime = ''
				this.startTime = ''
				this.kcName = ''
				this.time = ''
				this.firstQueryTime = this.$app.firstQueryTime()
				this.pageb = 1;
				this.endb = false;
				this.getMxList()
			},
			getMxList() {
				this.$app.ajax({
					api: this.$api.ksmjList(),
					data: {
						pagination: {
							page: this.pageb,
							firstQueryTime: this.firstQueryTime,
							rows: 10
						},
						param: {
							memberId: this.userInfo.id,
							courseName: this.kcName,
							startTime: this.startTime,
							endTime: this.endTime,
							venueId: this.venueId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.endb = true
						}
						if (res.recordList) {
							let arr = res.recordList
							this.mxList = this.mxList.concat(arr)
						}
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.kstj(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.tjInfo = res.record || {}
					}
				}).catch(() => {})
			},
			click1(e) {
				this.tabValue = e
				if (e == 1) {
					this.getDetail()
					this.searchBtn()
				} else {
					this.list = [];
					this.page = 1;
					this.end = false;
					this.getList()
				}
			},
			jumpDetail(e) {
				this.jump('/pages/member/cardDetail?id=', e.timeId + "&vid=" + e.venueId) 
			},
			confirm(e) {
				this.kssj = e.fulldate
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			dateBtn(e) {
				this.kssj = e.day
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			addDate(date, n) {
				date.setDate(date.getDate() + n)
				return date
			},
			// 获取星期
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			formatDate(date) {
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1)
				const day = this.calculation(date.getDate())
				const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
				return {
					label: month + '/' + day,
					value: year + month + '-' + day,
					old: new Date(date)
				}
			},
			setDate(date) {
				var week = date.getDay() - 1
				if (week === -1) {
					week = 6
				}
				date = this.addDate(date, week * -1)
				this.currentDate = new Date(date)
				const arr = []
				for (var i = 0; i < 7; i++) {
					arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
				}
				this.weekList = arr
				this.weekName = arr[0].label + '~' + arr[6].label
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			weekChange() {
				// if (this.weekList[0].old.getTime() < this.presentTime) return uni.showToast({
				// 	title: '不能再往前了',
				// 	icon: 'none',
				// 	duration: 2000
				// })
				this.setDate(this.addDate(this.currentDate, -7))
			},
			weekChangeb() {
				this.setDate(this.addDate(this.currentDate, 7))
			},
			weekChangec() {
				this.setDate(new Date())
			},
			typeIndexBtn(e) {
				this.typeIndex = e
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			getList() {
				this.$app.ajax({
					api: this.$api.myCourseListTeacher(),
					data: {
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: 10
						},
						param: {
							memberId: this.userInfo.id,
							// courseType: this.tabIndex,
							openStatus: this.swiperIndex == 0 ? '' : this.typeIndex,
							flag: '2',
							begin: this.swiperIndex == 1 ? this.weekList[0].value : this.kssj + ' 00:00:00',
							end: this.swiperIndex == 1 ? this.weekList[6].value : this.kssj + ' 23:59:59',
							venueId: this.venueId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							let arr = res.recordList
							this.list = this.list.concat(arr)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (this.tabValue == 0) {
					if (!this.end) {
						this.page += 1;
						this.getList();
					}
				} else {
					if (!this.endb) {
						this.pageb += 1;
						this.getMxList();
					}
				}

			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>
<style scoped lang="scss">
	.topTab {
		box-sizing: border-box;
		position: relative;
		// border-bottom: 1rpx solid #E5E5E5;
		width: 100%;
		margin: 0 auto;

		&::after {
			content: '';
			position: absolute;
			left: 0rpx;
			right: 0rpx;
			bottom: 1rpx;
			z-index: 0;
			height: 1px;
			background-color: #E5E5E5;
		}

		.left {
			width: 430rpx;
			z-index: 99;
		}
	}

	.qhTab {
		width: 100%;
		box-sizing: border-box;
		padding: 18rpx 30rpx;
		border-top: 1px solid #E5E5E5;

		.left {
			view {
				width: 126rpx;
				line-height: 50rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				border: 1px solid #E5E5E5;
				text-align: center;
				margin-right: 20rpx;

				&.on {
					color: $color;
					border-color: $color;
				}
			}
		}
	}

	.content {
		padding: 30rpx;

		// .calendar {
		// 	height: 50vh;
		// 	overflow: hidden;
		// }
	}


	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	#tabs .u-tabbar-item {
		font-size: 20rpx !important;
	}

	.headTj {
		width: 690rpx;
		box-sizing: border-box;
		margin: 0 auto 40rpx;
		background: $color;
		border-radius: 8rpx;

		.xbox {
			flex: 1;
			position: relative;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			box-sizing: border-box;
			padding: 30rpx 0;
			color: #FFFFFF;

			&:first-of-type {
				&::before {
					display: block;
					content: '';
					position: absolute;
					top: 50rpx;
					bottom: 50rpx;
					opacity: 0.5;
					right: 0;
					width: 1px;
					background: #fff;
				}
			}

			.num {
				font-size: 52rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 1;
				color: #FFFFFF;
				margin-bottom: 30rpx;
			}
		}
	}

	.tjContent {
		box-sizing: border-box;
		padding: 0 30rpx 30rpx;

		.mx {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.searchBox {
			margin: 20rpx 0;

			.time {
				margin-left: 20rpx;
				flex: none;
				width: 360rpx;
				line-height: 72rpx;
				height: 72rpx;
				border: none;
				outline: none;
				text-align: center;
				border-radius: 36rpx;
				background: #fff;
			}
		}
		.tJBtns {
			text-align: center;
			margin-bottom: 30rpx;
			.left {
				view {
					width: 100rpx;
					border-radius: 30rpx;
					border: 1px solid #E5E5E5;
					margin-right: 20rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 50rpx;
					&.on {
						background-color: $color;
						color: #fff;
						border-color: $color;
					}
				}
			}
			.right {
				view {
					border: 1px solid $color;
					width: 108rpx;
					line-height: 50rpx;
					background: $color;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 26rpx;
					&.cz {
						border: 1px solid #E5E5E5;
						background-color: #fff;
						color: #333333;
					}
				}
			}
		}
	}

	.xxkc {
		width: 100%;
		background: #FFFFFF;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.tabHead {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			background: $color;
			line-height: 40rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			.left {
				text {
					margin-left: 6rpx;
				}
			}
			
			&.on {
				color: #333333;
				background: #F8EFE0;
				.right {
					color: #F95601;
				}
			}
			&.ons {
				color: #333333;
				background: #FCEBEE;
				.right {
					color: #E33950;
				}
			}
			&.zs {
				color: #fff;
				background: $color;
			}
			&.hui {
				color: #666666;
				background: #DDDDDD;
			}
		}

		.cont {
			align-items: flex-start;
			padding: 20rpx 24rpx 30rpx;
			box-sizing: border-box;
			.left {
				width: 156rpx;
				height: 88rpx;
				border-radius: 8rpx;
				flex: none;
				margin-right: 20rpx;
			}
			

			.right {
				flex: 1;

				.name {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}

				.dd {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #888888;
					margin-top: 8rpx;
				}
				
				.jl {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
			}

		}

		.yicon {
			position: absolute;
			box-sizing: border-box;
			padding: 12rpx;
			background-color: $color;
			bottom: 0;
			right: 0;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: top;
			}
		}

	}
	.weekList {
		flex: 1;
		.li {
			width: 64rpx;
			text-align: center;
			.week {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 10rpx;
			}
			.date {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 64rpx;
			}
			&.on {
				.date {
					background-color: $color;
					color: #fff;
				}
			}
		}
		
	}
	.head {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.head-left {
			image {
				width: 30rpx;
				height: 30rpx;
			}
			text {
				font-size: 32rpx;
				line-height: 50rpx;
				font-weight: bolder;
				color: #111111;
				display: inline;
				margin: 0 20rpx;
			}
		}
		.head-right {
			color: $color;
		}
	}

	
</style>